// Placeholder to allow defining custom styles that override everything else.
// (Use `_sass/custom-variables.scss` to override variable defaults)

$x-toc-font-size: 85%;
$x-toc-font-weight: normal;
$x-toc-color: #000000d9;

$x-border-color: #f0f0f0;

$primary-color: #fb7299;

.x-container {
  max-width: 1400px;
  margin: 0 auto;
  * {
    line-height: 2rem;
  }
}

.x-content-side-layout {
  display: grid;
  overflow: hidden;
  width: 100%;
  .x-left {
    margin: 0.5rem;
    margin-left: 0;
    padding: 1rem;
    border: 1px solid $x-border-color;
  }
  .x-content {
    overflow: auto;
    margin: 0.5rem 0;
    padding: 1rem;
    border: 1px solid $x-border-color;
  }
  .x-right {
    margin: 0.5rem;
    padding: 1rem;
    border: 1px solid $x-border-color;
  }
}

@media (min-width: 1100px) {
  .x-content-side-layout {
    grid-template-columns: 1fr 3fr 1fr;
  }
}

@media (min-width: 800px) and (max-width: 1099px) {
  .x-content-side-layout {
    grid-template-columns: 1fr 3fr;
  }
  .x-right {
    display: none;
  }
}

@media (max-width: 799px) {
  .x-content-side-layout {
    grid-template-columns: 1fr;
  }
  .x-right {
    display: none;
  }
  .x-left {
    display: none;
  }
}

.x-collections-bar {
  background-color: $primary-color;
  padding: 0.5rem 1rem;
  a {
    color: white;
    margin-right: 0.5rem;
  }
}

.x-collection-section {
  h4 {
    font-weight: bolder;
    border-bottom: 1px solid $x-border-color;
    padding-left: 16px;
    margin: 0 -16px 8px;
  }
  ol {
    margin: 0 0 24px;
    li {
      list-style: none;
      a {
        font-size: $x-toc-font-size;
        font-weight: $x-toc-font-weight;
        color: $x-toc-color;
      }
    }
    .active {
      a {
        color: $primary-color;
        font-weight: bolder;
      }
    }
  }
}

.x-toc,
#toc {
  li {
    a {
      font-size: $x-toc-font-size;
      font-weight: $x-toc-font-weight;
      color: $x-toc-color;
    }
  }
}

.x-article {
  p {
    text-indent: 2rem;
  }
  li p {
    text-indent: 0;
  }
  blockquote {
    font-style: normal;
    font-size: 95%;
    color: gray;
    border: 1px solid gray;
    border-left-width: 4px;
    padding: 1rem;
    margin: 0 -1rem 1rem;
  }
  em {
    font-style: italic;
    text-decoration: double underline $primary-color;
  }
  pre {
    overflow-x: auto;
  }
  img {
    width: 95%;
    text-align: center;
  }
}

.x-translate-tip {
  border: 3px solid $primary-color;
  border-radius: 4px;
  padding: 16px;
  color: $primary-color;
  margin-bottom: 16px;
  h4 {
    font-weight: bolder;
    &:before {
      content: '🔶 ';
    }
  }
  p {
    margin: 0;
    font-size: 85%;
    text-indent: 2rem;
    a {
      color: $primary-color;
      text-decoration: underline;
    }
  }
}
